<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue-press入门 | 数据挖掘项目</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/assets/logo.jpg">
    <meta name="description" content="Data Mining">
    
    <link rel="preload" href="/assets/css/0.styles.0d66e9f8.css" as="style"><link rel="preload" href="/assets/js/app.58a4f135.js" as="script"><link rel="preload" href="/assets/js/2.46bed51d.js" as="script"><link rel="preload" href="/assets/js/11.609ae628.js" as="script"><link rel="prefetch" href="/assets/js/10.b45d518a.js"><link rel="prefetch" href="/assets/js/3.00f51676.js"><link rel="prefetch" href="/assets/js/4.2a5b3e1a.js"><link rel="prefetch" href="/assets/js/5.1df1db3a.js"><link rel="prefetch" href="/assets/js/6.fb1784b8.js"><link rel="prefetch" href="/assets/js/7.d79025f2.js"><link rel="prefetch" href="/assets/js/8.7bc753a2.js"><link rel="prefetch" href="/assets/js/9.a72ecd08.js">
    <link rel="stylesheet" href="/assets/css/0.styles.0d66e9f8.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">数据挖掘项目</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/guide/tech/" class="nav-link router-link-active">
  技术文档
</a></div><div class="nav-item"><a href="/guide/visualization/01.html" class="nav-link">
  具体效果
</a></div><div class="nav-item"><a href="http://sim.whu.edu.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  友情链接
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/guide/tech/" class="nav-link router-link-active">
  技术文档
</a></div><div class="nav-item"><a href="/guide/visualization/01.html" class="nav-link">
  具体效果
</a></div><div class="nav-item"><a href="http://sim.whu.edu.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  友情链接
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>echarts</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>vue-press</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tech/vue-press.html" aria-current="page" class="active sidebar-link">vue-press入门</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/tech/vue-press.html#目录结构" class="sidebar-link">目录结构</a></li><li class="sidebar-sub-header"><a href="/guide/tech/vue-press.html#导航栏配置" class="sidebar-link">导航栏配置</a></li><li class="sidebar-sub-header"><a href="/guide/tech/vue-press.html#侧边栏配置" class="sidebar-link">侧边栏配置</a></li><li class="sidebar-sub-header"><a href="/guide/tech/vue-press.html#主题配置" class="sidebar-link">主题配置</a></li><li class="sidebar-sub-header"><a href="/guide/tech/vue-press.html#配合echarts项目" class="sidebar-link">配合echarts项目</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue-press入门"><a href="#vue-press入门" class="header-anchor">#</a> vue-press入门</h1> <p>简单的创建，下载，初始化就不讲了，自己看文档</p> <h2 id="目录结构"><a href="#目录结构" class="header-anchor">#</a> 目录结构</h2> <blockquote><p>约定优于配置</p> <p>只需要简单的符合命名规则，就不需要进行额外的配置，何乐而不为呢</p></blockquote> <ul><li><code>docs/.vuepress</code>: 用于存放全局的配置、组件、静态资源等。</li> <li><code>docs/.vuepress/components</code>: 该目录中的 Vue 组件将会被自动注册为全局组件。</li> <li><code>docs/.vuepress/theme</code>: 用于存放本地主题。</li> <li><code>docs/.vuepress/styles</code>: 用于存放样式相关的文件。</li> <li><code>docs/.vuepress/styles/index.styl</code>: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。</li> <li><code>docs/.vuepress/styles/palette.styl</code>: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。</li> <li><code>docs/.vuepress/public</code>: 静态资源目录。</li> <li><code>docs/.vuepress/templates</code>: 存储 HTML 模板文件。</li> <li><code>docs/.vuepress/templates/dev.html</code>: 用于开发环境的 HTML 模板文件。</li> <li><code>docs/.vuepress/templates/ssr.html</code>: 构建时基于 Vue SSR 的 HTML 模板文件。</li> <li><code>docs/.vuepress/config.js</code>: 配置文件的入口文件，也可以是 <code>YML</code> 或 <code>toml</code>。</li> <li><code>docs/.vuepress/enhanceApp.js</code>: 客户端应用的增强。</li></ul> <h2 id="导航栏配置"><a href="#导航栏配置" class="header-anchor">#</a> 导航栏配置</h2> <p>在config.js中配置themeconfig</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    nav<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'主页'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'技术文档'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/guide/tech/'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'具体效果'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/guide/visualization/'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'友情链接'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'http://sim.whu.edu.cn/'</span><span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>打开文件夹路径时默认打开的页面（md文件）是名为README.md的文件，如果你需要哪个文件作为入口，就把它命名为README.md就好了（但是这样也挺不语义化的，应该有别的办法但是我不知道）</p> <p>同时还可以配置诸如target属性等，不过这里并不需要</p> <p>同时如果为http链接，会自动生成一个跳转icon，这一部分也是可以进行配置的</p> <h2 id="侧边栏配置"><a href="#侧边栏配置" class="header-anchor">#</a> 侧边栏配置</h2> <p>这一部分官方文档写的很不好，我自己总结了一下。</p> <p>首先，同导航栏配置一样，输入文件夹路径默认打开的是README.md</p> <p>然后坑的地方来了 <strong>请写完全文件路径</strong></p> <p>比如如下配置</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>sidebar<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">'/guide/tech'</span><span class="token operator">:</span><span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            title<span class="token operator">:</span><span class="token string">'echarts'</span><span class="token punctuation">,</span>
            collapsable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'echarts'</span><span class="token punctuation">,</span><span class="token string">'test'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            title<span class="token operator">:</span><span class="token string">'vue-press'</span><span class="token punctuation">,</span>
            collapsable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'vue-press'</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>看上去没有什么问题对不对，但是 <strong>'/guide/tech</strong>最后没有加上斜杠，所以被解析成为了 <strong>'/guide/tech.md</strong>，你会发现导航栏什么都没有</p> <h2 id="主题配置"><a href="#主题配置" class="header-anchor">#</a> 主题配置</h2> <p>我们的项目是以rossmann作为研究对象的，所以我在首页给了一张rossmann的logo</p> <p>因为logo是红色的，所以我就想把主题色改为红色（具体地说，rgb(186, 37, 77)）</p> <p>修改主题色的方法：</p> <ol><li><p>新建.vuepress/styles目录</p></li> <li><p>新建pattern.styl文件(stylus文件)</p></li> <li><div class="language-stylus line-numbers-mode"><pre class="language-stylus"><code><span class="token variable-declaration"><span class="token variable">$accentColor</span> <span class="token operator">=</span> <span class="token func"><span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">186</span><span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">,</span> <span class="token number">77</span><span class="token punctuation">)</span></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ol> <p>对更多的表现模块进行客制也是可以的，比如$textColor，$borderColor，$codeBgColor</p> <h2 id="配合echarts项目"><a href="#配合echarts项目" class="header-anchor">#</a> 配合echarts项目</h2> <p>首先结论：vue-press作为静态博客，是不可能配合echarts的</p> <p>我之前直接将使用了echarts的html传给博客，但是发现不能展示</p> <p>因为vue-press实际上是将md文件编译成了html文件，如果直接传输html，反而无法展示</p> <p>但是这并不是问题，因为我们实际上也没有必要在这里展示，我们只要能够跳转到我们的echarts项目不就可以了？</p> <p>所以假设已经拥有了一个vue-echarts项目，我们默认它在本地端口打开（注意，vue-press也是vue应用，默认在8080端口打开，如果另一个项目也是默认端口，则会发生端口冲突），</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/guide/tech/echarts进阶使用.html" class="prev">
        test
      </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.58a4f135.js" defer></script><script src="/assets/js/2.46bed51d.js" defer></script><script src="/assets/js/11.609ae628.js" defer></script>
  </body>
</html>
